<template>
  <div class="container">
    <account-header></account-header>
    <div class="account-contain">
      <account-side @page="getPage"></account-side>
      <account-main :page="page"></account-main>
    </div>
  </div>
</template>

<script>
import AccountHeader from './components/AccountHeader'
import AccountSide from './components/AccountSide'
import AccountMain from './components/AccountMain'

export default {
  data () {
    return {
      page: '修改个人信息'
    }
  },
  components: {
    AccountHeader,
    AccountSide,
    AccountMain
  },
  methods: {
    getPage (page) {
      this.page = page
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  display flex
  flex-direction column
  justify-content center
  align-items center
  width 700px
  margin 0 auto
  .account-header
    margin-top 100px
    margin-bottom 20px
  .account-contain
    display flex
    flex-direction row
    width 100%
    .account-side
      margin-right 20px
    .account-main
      width 100%
</style>
